<template>
  <div class="home">
    <!-- 路由占位符 -->
    <router-view></router-view>
    <!-- 头部导航栏 -->
    <van-nav-bar title="标题" fixed>
      <!-- 导航栏左边部分 -->
      <template #left>
        <div class="home_nav">
          <div class="t1">{{times}}</div>
          <div class="t2">{{myInfo.nickName
}}</div>
        </div>
      </template>

      <!-- 导航栏右边部分 -->
      <template #right>
        <!-- 搜索框 -->
        <div class="home_search">
          <van-search placeholder="请输入搜索关键词" shape="round" @focus="searchFocus" />
        </div>
      </template>
    </van-nav-bar>

    <!-- 轮播图区域 -->
    <div class="home_content">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,i) in bannerData " :key="i"><img :src="item.bannerImg" alt="" class="auto_img" @click="jumpGoodPage(item.pid,item)"></van-swipe-item>
      </van-swipe>
    </div>

    <!-- 商品列表区域 -->
    <div class="home_goodsList clearfix">
      <div class="good" v-for="(good) in goodsData " :key="good.id" @click="jumpGoodPage(good.pid,good)">
        <!-- 上半图片部分 -->
        <div class="good_img">
          <img :src="good.smallImg" alt="">
          <!-- hot 图片 -->
          <div class="hot">
            热卖
          </div>
        </div>
        <!-- 下半文章部分 -->
        <div class="good_text">
          <div class="good_name">
            {{good.name}}
          </div>
          <div class="good_Ename">
            {{good.enname}}
          </div>
          <div class="good_price">
            ￥{{good.price}}
          </div>
        </div>
      </div>

    </div>

  </div>
</template>
<script>
import '@/assets/less/home.less'
import '@/assets/less/good.less'
import request from '@/utils/reques.js'
// 默认导出组件
export default {
  // 组件名称
  name: 'Home',
  data() {
    return {
      bannerData: [],
      times: '',
      goodsData: [],
      myInfo: {}
    }
  },
  created() {
    this.getBannerData()
    this.getDate()
    this.getGoodsData()
    this.getMyInfo()
  },
  methods: {
    // 获取轮播图数据
    async getBannerData() {
      // 轻加载提示要在方法里面使用
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })

      try {
        // 获取接口数据
        const { data: res } = await request.get('/banner', { params: { appkey: this.appkey } })
        // console.log(res)

        if (res.code == 300) {
          this.$toast.clear()
          this.bannerData = res.result
        }
      } catch (error) {
        this.$toast.clear()
      }
    },
    getDate() {
      let hour = new Date().getHours()

      if (hour < 6) {
        this.times = '早点睡捏'
      } else if (hour < 11) {
        this.times = '早捏'
      } else if (hour < 13) {
        this.times = '午好捏'
      } else if (hour < 18) {
        this.times = '下午好捏'
      } else if (hour < 23) {
        this.times = '晚好捏'
      }
    },

    // 商品信息
    async getGoodsData() {
      try {
        // 获取接口数据
        const { data: res } = await request.get('/typeProducts', { params: { appkey: this.appkey, key: 'isHot', value: 1 } })

        this.goodsData = res.result
      } catch {}
    },
    // 点击跳转到商品详情页
    jumpGoodPage(pid, item) {
      this.$router.push({ name: 'Good', params: { pid } })
      item.time = new Date().toLocaleDateString() + ' ' + new Date().toLocaleTimeString()
      this.$store.commit('addTrackCount', item)
    },
    //搜索框跳转
    searchFocus() {
      this.$router.push({ path: '/search', name: 'Search' })
    },
    // 通过我的接口，获取我的信息 , localStorage.getItem('token')
    async getMyInfo() {
      // 轻加载提示要在方法里面使用
      this.$toast.loading({
        message: '获取信息中...',
        forbidClick: true
      })
      try {
        let tokenString = localStorage.getItem('token')
        if (!tokenString) {
          return
        }
        const { data: res } = await request.get('/findMy', { params: { appkey: this.appkey, tokenString } })
        if (res.code === 'A001') {
          this.myInfo = res.result[0]
        }
      } catch (error) {
        this.$toast.clear()
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
